<!-- 景点详情页 -->
 <!-- views/AttractionDetail.vue -->
<template>
    <div class="container mx-auto px-4 py-8">
      <!-- 返回导航 -->
      <router-link 
        to="/attractions" 
        class="mb-6 inline-block text-blue-600 hover:text-blue-800 transition-all"
      >
        <font-awesome-icon icon="arrow-left" class="mr-2" />返回景点列表
      </router-link>
  
      <!-- 主体内容 -->
      <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <!-- 头部 -->
        <div class="p-6 border-b">
          <div class="flex justify-between items-start">
            <div>
              <h1 class="text-3xl font-bold mb-2">{{ attraction.name }}</h1>
              <div class="flex items-center">
                <div class="text-yellow-400 mr-2">
                  <font-awesome-icon 
                    v-for="star in fullStars"
                    :key="'full-' + star"
                    icon="star"
                  />
                  <font-awesome-icon 
                    v-if="hasHalfStar"
                    icon="star-half-alt"
                  />
                  <font-awesome-icon
                    v-for="star in emptyStars"
                    :key="'empty-' + star"
                    :icon="['far', 'star']"
                  />
                </div>
                <span class="text-gray-600">({{ attraction.reviews }}条评价)</span>
              </div>
            </div>
            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
              {{ attraction.category }}
            </span>
          </div>
        </div>
  
        <!-- 图片展示区 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
          <!-- 主图 -->
          <div class="lg:col-span-2">
            <div class="h-96 bg-gray-200 rounded-xl overflow-hidden">
              <img 
                :src="currentImage" 
                :alt="attraction.name"
                class="w-full h-full object-cover transition-opacity duration-300"
              />
            </div>
            <!-- 缩略图列表 -->
            <div class="grid grid-cols-3 gap-2 mt-4">
              <div 
                v-for="(img, index) in attraction.images"
                :key="index"
                @click="currentImageIndex = index"
                :class="[currentImageIndex === index ? 'ring-2 ring-blue-500' : '']"
                class="h-24 cursor-pointer rounded-lg overflow-hidden transition-all"
              >
                <img 
                  :src="img" 
                  class="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
  
          <!-- 侧边信息 -->
          <div class="space-y-6">
            <!-- 基本信息卡片 -->
            <div class="bg-blue-50 rounded-xl p-4">
              <h3 class="font-semibold mb-3">基本信息</h3>
              <div class="space-y-2 text-gray-700">
                <p><font-awesome-icon icon="clock" class="mr-2 w-5" />{{ attraction.hours }}</p>
                <p><font-awesome-icon icon="ticket" class="mr-2 w-5" />{{ attraction.tickets }}</p>
                <p><font-awesome-icon icon="location-dot" class="mr-2 w-5" />{{ attraction.address }}</p>
              </div>
            </div>
  
            <!-- 操作按钮 -->
            <div class="space-y-3">
              <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700">
                <font-awesome-icon icon="directions" class="mr-2" />路线导航
              </button>
              <button class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700">
                <font-awesome-icon icon="ticket" class="mr-2" />立即购票
              </button>
              <button class="w-full border border-blue-600 text-blue-600 py-3 rounded-lg hover:bg-blue-50">
                <font-awesome-icon icon="heart" class="mr-2" />收藏景点
              </button>
            </div>
  
            <!-- 联系信息 -->
            <div class="bg-blue-50 rounded-xl p-4">
              <h3 class="font-semibold mb-3">联系方式</h3>
              <div class="space-y-2 text-gray-700">
                <p><font-awesome-icon icon="phone" class="mr-2 w-5" />{{ attraction.contact.phone }}</p>
                <p><font-awesome-icon icon="envelope" class="mr-2 w-5" />{{ attraction.contact.email }}</p>
                <p><font-awesome-icon icon="globe" class="mr-2 w-5" />{{ attraction.contact.website }}</p>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 详情内容 -->
        <div class="p-6 border-t">
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧描述 -->
            <div class="lg:col-span-2">
              <h2 class="text-xl font-semibold mb-4">景点介绍</h2>
              <div class="prose max-w-none">
                <p v-for="(paragraph, index) in attraction.description.split('\n')" 
                   :key="index"
                   class="text-gray-700 mb-4"
                >
                  {{ paragraph }}
                </p>
              </div>
  
              <!-- 地图 -->
              <div class="mt-8">
                <h3 class="text-xl font-semibold mb-4">位置地图</h3>
                <div class="h-64 bg-gray-200 rounded-xl flex items-center justify-center">
                  <font-awesome-icon icon="map-location-dot" class="text-4xl text-gray-400" />
                </div>
              </div>
            </div>
  
            <!-- 右侧信息 -->
            <div class="space-y-6">
              <!-- 温馨提示 -->
              <div class="bg-yellow-50 rounded-xl p-4">
                <h3 class="font-semibold mb-2">游览提示</h3>
                <ul class="list-disc list-inside space-y-2 text-gray-700">
                  <li v-for="(tip, index) in attraction.tips" :key="index">{{ tip }}</li>
                </ul>
              </div>
  
              <!-- 用户评价 -->
              <div class="bg-white rounded-xl p-4 shadow-sm">
                <h3 class="font-semibold mb-4">最新评价</h3>
                <div v-for="review in attraction.reviews" :key="review.id" class="mb-4 pb-4 border-b">
                  <div class="flex items-center mb-2">
                    <span class="font-medium">{{ review.user }}</span>
                    <span class="text-yellow-400 ml-2">
                      <font-awesome-icon 
                        v-for="n in 5"
                        :key="n"
                        :icon="n <= review.rating ? 'star' : ['far', 'star']"
                        class="text-sm"
                      />
                    </span>
                  </div>
                  <p class="text-gray-600 text-sm">{{ review.comment }}</p>
                  <p class="text-gray-400 text-xs mt-1">{{ review.date }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useAttractionsStore } from '../../stores/attractions'
  
  const route = useRoute()
  const store = useAttractionsStore()
  
  // 获取当前景点数据
  const attraction = computed(() => {
    return store.getAttractionById(Number(route.params.id)) || dummyData
  })
  
  // 图片切换逻辑
  const currentImageIndex = ref(0)
  const currentImage = computed(() => attraction.value.images[currentImageIndex.value])
  
  // 星级计算
  const fullStars = computed(() => Math.floor(attraction.value.rating))
  const hasHalfStar = computed(() => attraction.value.rating % 1 >= 0.5)
  const emptyStars = computed(() => 5 - Math.ceil(attraction.value.rating))
  
  // 模拟数据（当store未配置时）
  const dummyData = {
    id: 1,
    name: '法门寺',
    category: '文化古迹',
    rating: 4.7,
    reviews: 128,
    images: [
      '/images/attractions/famen-1.jpg',
      '/images/attractions/famen-2.jpg',
      '/images/attractions/famen-3.jpg'
    ],
    hours: '08:00 - 18:00（全年开放）',
    tickets: '成人票：80元，学生票：40元',
    address: '陕西省宝鸡市扶风县法门镇',
    contact: {
      phone: '0913-525 8888',
      email: 'info@famensi.com',
      website: 'www.famensi.com'
    },
    description: `法门寺始建于东汉末年，距今已有1700多年历史，素有"关中塔庙始祖"之称。寺内珍藏释迦牟尼佛指骨舍利，是佛教圣地。...
    `,
    tips: [
      '建议游览时间：2-3小时',
      '景区提供免费讲解服务',
      '佛塔地宫每日限流参观'
    ],
    reviews: [
      {
        id: 1,
        user: '旅行爱好者',
        rating: 5,
        comment: '非常震撼的佛教文化体验，地宫文物保存完好',
        date: '2024-03-15'
      },
      // 更多评价...
    ]
  }
  </script>
  
  <style scoped>
  .prose {
    line-height: 1.75;
  }
  
  .list-disc {
    list-style-type: disc;
  }
  </style>